<template>
	<view class="warning-page">
		<NavBar title="库存预警"/>
		<view class="warning-list flex-column">
			<view class="w-item" v-for="(item, index) in wList" :key="item.forewarning_no">
				<div class="w-title align-center">
					<view class="no"> {{ item.forewarning_no }} </view>
					<wd-tag :type="item.status==1?'success':'danger'" mark>
						{{ item.status == 1 ? '开启' : '关闭' }}
					</wd-tag>
				</div>
				<div class="w-info flex-column">
					<div class="goods-name"> 商品名称：{{ item.product_name }} </div>
					<div class="sku"> 商品 sku：{{ item.sku }} </div>
					<div class="stock"> 商品库存：{{ item.stock_quantity }} </div>
					<div v-if="item.isEdit" class="warning-num"> 预警阈值：<wd-input-number v-model="item.newNum" :min="0" /> </div>
					<div class="warning-num" v-else> 预警阈值：{{ item.warning_threshold }} </div>
					备注：<wd-textarea :readonly="!item.isEdit" no-border v-model="item.remark" auto-height placeholder="请输入备注信息" />
				</div>
				<div class="w-footer align-center">
					<wd-button v-if="!item.isEdit" size="small" @tap="wList[index].isEdit = true"> 修改 </wd-button>
					<template v-else>
						<wd-button size="small" plain hairline type="info" @tap="wList[index].isEdit = false"> 取消 </wd-button>
						<wd-button size="small" @tap="updateWarning(index)"> 确认 </wd-button>
					</template>
				</div>
			</view>
		</view>
		<view class="btn-box">
			<wd-button class="btn" @tap="pickRef.open()"> 新增预警 </wd-button>
		</view>
		<PickSku ref="pickRef" @addSuccess="getWarningList"/>
		<wd-message-box />
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import PickSku from './components/PickSku.vue'
	import { useUserStore } from '@/store'
	import { warningListApi, editWaringApi } from '@/api'
	import { useMessage } from '@/uni_modules/wot-design-uni'
	const message = useMessage()
	const pickRef = ref()
	const wList = ref([])
	const updateWarning = (i) => {
		const { userInfo } = useUserStore()
		const { sku_id, remark, newNum, warning_threshold, forewarning_no } = wList.value[i]
		message.confirm({title: '修改预警阈值', msg: `是否修改${forewarning_no}预警单？`}).then(res =>{
			const params = {
				sku_id,
				remark,
				forewarning_no,
				warning_threshold: newNum
			}
			editWaringApi(params).then(res => {
				uni.showToast({ icon: 'none', title: '修改成功' })
				wList.value[i].isEdit = false
				wList.value[i].warning_threshold = newNum
			}).catch(err => {
				uni.showToast({ icon: 'none', title: err.msg })
			})
		})
	}
	const getWarningList = () => {
		warningListApi().then(res => {
			wList.value = res
			wList.value.forEach(item => {
				item.isEdit = false
				item.newNum = item.warning_threshold
			})
		})
	}
	onLoad(() => {
		getWarningList()
	})
</script>

<style lang="scss" scoped>
	.warning-page {
		padding: 20rpx 24rpx;
		padding-bottom: 140rpx;
		.warning-list {
			gap: 20rpx;
			.w-item {
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				.w-title {
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					border-bottom: 1px solid #eee;
					justify-content: space-between;
				}
				.w-info {
					gap: 20rpx;
					.wd-textarea {
						border: 1px solid #eee;
						border-radius: 20rpx;
						padding: 20rpx;
					}
				}
				.w-footer {
					margin-top: 20rpx;
					padding-top: 20rpx;
					justify-content: end;
					border-top: 1px solid #eee;
					.wd-button {
						height: 44rpx;
						margin-left: 30rpx;
					}
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx 24rpx;
			background-color: #fff;
			.btn {
				width: 100%;
			}
		}
	}
</style>
